﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>指定子元素的排列方式</title>
<style type="text/css">
#layout {
	height: 250px;
	width: 600px;
	margin-top: 30px;
	padding: 10px;
	border: 1px solid #930;
	display: box;
	display: -moz-box;
	display: -webkit-box;
	box-direction:reverse;
	-moz-box-direction:reverse;
	-webkit-box-direction:reverse;

}
#test1 {
	width: 250px;
	color: #00F;
	background-image: url(img/BG03.png);
        border: 1px solid #00F;
}
#test2 {
	width: 150px;
	color: #F00;
	background-image: url(img/BG05.png);
}
#test3 {
	width: 200px;
	color: #360;
	background-image: url(img/BG04.png);
	border: 1px solid #360;
}
</style>
</head>
<body>
<div id="layout">
	<div id="test1">DIV块 test1</div>
	<div id="test2">DIV块 test2</div>
	<div id="test3">DIV块 test3</div>
</div>
</body>
</html> 



